// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box > ul > li");
        // 获取小圆点span
        this.dots = this.tag.querySelectorAll(".dot_box > span")
        // 获取所有li要移动的类名
        this.listClassName = ["list02", "list03", "list04","list01"];
        // 初始化变量
        this.index = 0;
        // 获取上一个初始化变量值
        this.lastIndex = 0;
        // 触发绑定事件
        this.eventFn();
        // 触发小圆点带点击事件
        this.dotsEvent();
        // 调用定时器，开启自动轮播
        this.timerFn();
        
    };

    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });
    };

    // 点击右按钮
    eventFn() {
        //  使用bind方法改变this
        this.rBtn.addEventListener("click",this.rightFn.bind(this));
        this.lBtn.addEventListener("click",this.leftFn.bind(this));
    };

    //  控制右边函数
    rightFn(){
        // 操作数组
        // 添加数组最后值到第一个值
        this.listClassName.unshift(this.listClassName[this.listClassName.length-1] );
        // 删除数组的最后一个值
        this.listClassName.pop();
        // li全部重新设置类名
        this.restListFn();

        // index操作完成之后重新赋值
        this.lastIndex = this.index++;
        // 改变小圆点颜色
        this.dotsColor();
        };
        // 控制左边函数
        leftFn(){
        // 操作数组
        // 添加数组第一个值到最后
        this.listClassName.push(this.listClassName[0]);
        // 删除数字的第一个值
        this.listClassName.shift();
        // li全部重新设置类名
        this.restListFn();
    
        // index操作完成之后重新赋值
        this.lastIndex = this.index--;
        // 改变小圆点颜色
        this.dotsColor();
        };

        // 改变小圆点颜色
        dotsColor() {
            // index最小值
            if(this.index == -1){
                this.index = this.listClassName.length - 1;
            };
            // index最大值
            if(this.index == this.listClassName.length){
                this.index = 0;
            };
            // 去除当前span类名
            this.dots[this.lastIndex].classList.remove("dot_active");
            // 添加类名dot_active
            this.dots[this.index].classList.add("dot_active");
        
        };

        // 点击小圆点事件
        dotsEvent(){
            this.dots.forEach((item, idx) => {
                item.addEventListener("mouseenter", () => {
                    // console.log(idex);
                    // 获取需要翻动页数
                    let num = idx - this.index;
                    // 大于0就是右翻动
                    if(num > 0){
                        for(let i = 0; i < num; i++){
                            this.rightFn();
                        }
                    }else{
                        // num是负数，需要转正
                        for(let i = 0; i <Math.abs(num); i++){
                            this.leftFn();
                        }
                    }
                });
            });
        };  

        // 自动轮播
        timerFn(){
            let timer = null;
            tFn.call(this);
            function tFn(){
                timer = setInterval(() => {
                    this.rightFn();
                },1000);
            };
    
            this.tag.addEventListener("mouseenter", () => {
                clearInterval(timer);
            });
            this.tag.addEventListener("mouseleave", () => {
                tFn.call(this);
            });
        };
    
}